---
id: inline
title: Inline
---

import { Props, BoxProps } from '../../core/components';

`Inline` renders children horizontally, wrapping to multiple lines if needed, with equal spacing between items.

### Space

```jsx live
const App = () => {
  return (
    <Inline space={2}>
      <Placeholder width={40} />
      <Placeholder width={60} />
      <Placeholder width={50} />
      <Placeholder width={80} />
      <Placeholder width={100} />
      <Placeholder width={60} />
    </Inline>
  )
}

render(<App />)
```

### Nested

```jsx live
const App = () => {
  return (
    <Inline space={10}>
      <Inline space={2}>
        <Placeholder width={60} />
        <Placeholder width={90} />
      </Inline>
      <Inline space={2}>
        <Placeholder width={60} />
        <Placeholder width={90} />
      </Inline>
    </Inline>
  )
}

render(<App />)
```

### AlignX

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Inline space={2} alignX="left">
        <Placeholder width={90} />
        <Placeholder width={60} />
        <Placeholder width={120} />
        <Placeholder width={100} />
        <Placeholder width={100} />
      </Inline>

      <Inline space={2} alignX="center">
        <Placeholder width={90} />
        <Placeholder width={60} />
        <Placeholder width={120} />
        <Placeholder width={100} />
        <Placeholder width={100} />
      </Inline>

      <Inline space={2} alignX="right">
        <Placeholder width={90} />
        <Placeholder width={60} />
        <Placeholder width={120} />
        <Placeholder width={100} />
        <Placeholder width={100} />
      </Inline>
    </Stack>
  )
}

render(<App />)
```

### AlignY

```jsx live
const App = () => {
  return (
    <Stack space={4}>
      <Inline space={2} alignY="top">
        <Placeholder width={100} height={40} />
        <Placeholder width={100} />
        <Placeholder width={120} height={80} />
        <Placeholder width={100}/>
        <Placeholder width={100} height={40} />
      </Inline>

      <Inline space={2} alignY="center">
        <Placeholder width={100} height={40} />
        <Placeholder width={100} />
        <Placeholder width={120} height={80} />
        <Placeholder width={100}/>
        <Placeholder width={100} height={40} />
      </Inline>

      <Inline space={2} alignY="bottom">
        <Placeholder width={100} height={40} />
        <Placeholder width={100} />
        <Placeholder width={120} height={80} />
        <Placeholder width={100}/>
        <Placeholder width={100} height={40} />
      </Inline>
    </Stack>
  )
}

render(<App />)
```


### Props

:::info

`Inline` accepts all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'space',
      type: 'responsiveProp<float>',
      required: false,
    },
    {
      name: 'alignX',
      type: 'responsiveProp<[#left | #center | #right | #between | #around | #evenly]>',
      required: false,
    },
    {
      name: 'alignY',
      type: 'responsiveProp<[#left | #center | #right | #between | #around | #evenly]>',
      required: false,
    },
  ]}
/>

<BoxProps />
